<template>
	<view class="warning">
		*账号注销后，您无法正常登录零付小程序，对应相关权益将同时全部作废
	</view>
	<view class="container">

		<view class="form">
			<text class="form-title">请完成以下验证</text>
			<text class="form-instruction">请输入{{mobile||''}}收到的短信验证码</text>

			<view class="input-group">
				<text class="label">验证码</text>
				<input class="input" type="number" placeholder="请输入6位数验证码" v-model="verificationCode"
					@input="handleInputChange" />
				<button :class="['get-code-button', countDown > 0 ? 'counting' : '']" :disabled="countDown > 0"
					@click="getVerificationCode">
					{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
				</button>
			</view>

			<button class="submit-button" @click="confirmCancel" >确定注销</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		userLogOff,
	} from '@/api/user.js'
	import {
		sendSmsCode
	} from "@/api/ModifyPhone.js";
	const verificationCode = ref('')
	const mobile = ref('')
	const countDown = ref(0) // 倒计时秒数
	const timer = ref(null) // 定时器引用

	// 计算属性：判断验证码是否填写完整
	const isCodeFilled = computed(() => verificationCode.value.length === 6)

	// 处理输入限制
	const handleInputChange = () => {
		if (verificationCode.value.length > 6) {
			verificationCode.value = verificationCode.value.slice(0, 6)
		}
	}

	// 获取验证码
	const getVerificationCode = async () => {
		// 验证手机号是否存在
		if (!mobile.value) {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'none'
			})
			return
		}

		try {
			// 调用发送验证码接口
			const res = await sendSmsCode(mobile.value)

			if (res.code === 200) {
				uni.showToast({
					title: res.msg || '验证码发送成功',
					icon: 'none'
				})

				// 开始倒计时，设置为60秒
				countDown.value = 60
				startCountDown()
			} else {
				uni.showToast({
					title: res.msg || '验证码发送失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('发送验证码失败:', error)
			uni.showToast({
				title: '网络异常，请稍后重试',
				icon: 'none'
			})
		}
	}

	// 倒计时逻辑
	const startCountDown = () => {
		// 清除之前的定时器
		if (timer.value) {
			clearInterval(timer.value)
		}

		// 设置新定时器
		timer.value = setInterval(() => {
			countDown.value--
			if (countDown.value <= 0) {
				clearInterval(timer.value)
				timer.value = null
			}
		}, 1000)
	}

	// 确认注销
	const confirmCancel = async () => {
		// 验证验证码
		if (!isCodeFilled.value) {
			uni.showToast({
				title: '请输入6位验证码',
				icon: 'none'
			})
			return
		}

		uni.showModal({
			title: '确认注销',
			content: '您确定要注销账号吗？注销后所有数据将无法恢复。',
			success: async (res) => {
				if (res.confirm) {
					try {
						// 调用注销接口，传递mobile和code参数
						const response = await userLogOff({
							mobile: mobile.value,
							code: verificationCode.value
						})

						// 接口调用成功
						if (response.code === 200) {
							uni.showToast({
								title: '账号注销成功',
								icon: 'none'
							})

							// 清理本地缓存
							uni.clearStorageSync()

							// 延迟跳转，确保用户看到成功提示
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabBars/DeleteAccount/DeleteAccountIndexSuccess'
								})
							}, 1500)
						} else {
							// 接口返回错误信息
							uni.showToast({
								title: response.msg || '注销失败，请重试',
								icon: 'none'
							})
						}
					} catch (error) {
						// 网络错误等异常情况
						console.error('注销接口调用失败:', error)
						uni.showToast({
							title: '网络异常，请稍后重试',
							icon: 'none'
						})
					}
				}
			}
		})
	}

	// 页面加载时获取用户信息
	onMounted(() => {
		try {
			const userInfoStr = uni.getStorageSync('user_info');
			if (userInfoStr) {
				const userInfo = JSON.parse(userInfoStr)
				mobile.value = userInfo.fullPhone || ''
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				// 跳转到登录页
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}, 1000)
			}
		} catch (error) {
			console.error('解析用户信息失败:', error)
			mobile.value = ''
		}
	})

	// 页面卸载时清除定时器
	onUnmounted(() => {
		if (timer.value) {
			clearInterval(timer.value)
		}
	})
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.warning {
		background: #FFEBE7;
		color: #FF6A47;
		height: 125rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		padding: 0rpx 20rpx;
	}

	.form-title {
		font-size: 50rpx;
		font-weight: 500;
		margin-bottom: 25rpx;
		display: block;
		color: #303133;
	}

	.form-instruction {
		font-size: 28rpx;
		color: #666;
		font-weight: 400;
		margin-bottom: 60rpx;
		display: block;
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 150rpx;
		border-bottom: 1px solid #E2E2E2;
		padding-bottom: 15rpx;

		.label {
			color: #303133;
			font-size: 28rpx;
			font-weight: 500;
			margin-right: 25rpx;
		}
	}

	.input {
		flex: 1;
		padding: 15rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.get-code-button {
		background-color: #1890ff;
		color: #FFFFFF;
		border: none;
		border-radius: 34rpx;
		font-size: 28rpx;
		height: 67rpx;
		padding: 0 20rpx;
		transition: all 0.3s;
	}

	.get-code-button.counting {
		background-color: #B3D3FF;
		color: #fff;
	}

	.get-code-button:disabled {
		background-color: #ccc;
		opacity: 0.7;
		cursor: not-allowed;
	}

	.submit-button {
		background-color: #1890ff;
		color: #ffffff;
		border: none;
		border-radius: 44rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;

		&:disabled {
			background-color: #ccc;
			opacity: 0.7;
			cursor: not-allowed;
		}
	}
</style>